<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LibSourcey WebRTC Capturer</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="symple-client-player/src/symple.player.css">
    <link rel="stylesheet" type="text/css" href="main.css">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.js"></script> -->
    <script type="text/javascript" src="socket.io-client/dist/socket.io.min.js"></script>

    <script type="text/javascript" src="symple.js"></script>
    <script type="text/javascript" src="symple.client.js"></script>
    <script type="text/javascript" src="symple.player.js"></script>
    <script type="text/javascript" src="symple.player.webrtc.js"></script>
    <!--
    TODO: use symple client from npm
    <script type="text/javascript" src="symple-client/src/symple.js"></script>
    <script type="text/javascript" src="symple-client/src/symple.client.js"></script>
    <script type="text/javascript" src="symple-client-player/src/symple.player.js"></script>
    <script type="text/javascript" src="symple-client-player/src/symple.player.webrtc.js"></script>
    -->
    <script>

        // Symple client options
        CLIENT_OPTIONS = {
            url: 'http://localhost:<%- port %>',
            // secure: true,
            peer: <%- JSON.stringify(peer) %>
        }

        // WebRTC config
        // This is where you would add TURN servers for use in production
        WEBRTC_CONFIG = {
            'iceServers': [
                // {'url': 'stun:stun.l.google.com:19302'}
            ]
        }

        // Intercept Symple log messages
        Symple.log = function () {
            var args = Array.prototype.slice.call(arguments);
            $('#webrtc-logs').append(JSON.stringify(args)).append('\n');
            console.log.apply(console, arguments);
        }
    </script>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- <div class="alert alert-info alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <strong>Hey there!</strong> This client plays the custom WebRTC video feed generated by the <code>webrtcstreamer</code> sample.
      </div> -->

      <div class="row">
        <div class="col">
          <div id="webrtc-video">
            <div class="video-player">
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card">
            <div class="card-header">
              Devices
            </div>
            <div id="streaming-devices" class="list-group list-group-flush">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-header">
              Logs
            </div>
            <div class="card-block">
              <pre id="webrtc-logs"></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
